<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下载界面</title>
    <style>
        /* 添加样式以美化页面 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-image: url('background.jpg'); /* 背景图像 */
            background-size: cover;
            background-repeat: no-repeat;
        }

        header {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }

        .tabs {
            display: flex;
            margin-bottom: 20px;
        }

        .tab-button {
            flex: 1;
            text-align: center;
            padding: 10px;
            background-color: #f2f2f2;
            cursor: pointer;
            border-radius: 5px 5px 0 0;
            transition: background-color 0.3s; /* 添加颜色变化过渡效果 */
        }

        .tab-button.active { /* 选中时的颜色 */
            background: linear-gradient(to bottom, #3399ff, #3366cc);
            color: white;
        }

        .tab-content {
            display: none;
            border: 1px solid #ddd;
            border-radius: 0 0 5px 5px;
            padding: 20px;
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }

        th, td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: center;
        }

        th {
            background-color: #f2f2f2;
        }

        /* 搜索框样式 */
        input[type="text"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        /* 添加更多样式以满足你的需求 */
    </style>
</head>
<body>
    <header>
        <h1>下载界面</h1>
        <p>欢迎使用我们的下载服务。</p>
    </header>
    <div class="container">
        <div class="tabs">
            <div class="tab-button active" onclick="openTab('internal')">内部版本</div>
            <div class="tab-button" onclick="openTab('external')">外部版本</div>
        </div>
        <div class="tab-content" id="internal">
            <h2>内部版本</h2>
            <input type="text" id="searchInternal" placeholder="搜索内部版本...">
            <table>
                <thead>
                    <tr>
                        <th>项目名称</th>
                        <th>外网下载</th>
                        <th>银河麒麟</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>YZ-202308001<br>YZ-202308003<br>YZ-202308008<br>YZ-202305001<br>YZ-202304001<br>YZ-202212005<br>YZ-202206003<br>YZ-202301002
                        <br>YZ-202206002<br>YZ-202304006<br>YZ-202304005<br>YZ-202306002<br>YZ-202302002<br>WX-202305005</td>
                        <td><a href="http://10.10.100.180:8080/PC%20Software/SerialTool/V2.0/SerialTool_V2.0.23.exe">下载</a></td>
                        
                    </tr>
                    <tr>
                        <td>吊舱</td>
                        <td><a href="http://10.10.100.180:8080/PC%20Software/DC/1.5.18/DC.hs1.5.18.zip">下载</a></td>
                        <td><a href="http://10.10.100.180:8080/PC%20Software/DC/1.5.18/P-G02B_amd64_1.5.18.deb">下载</a></td>
                    </tr>
                    <!-- 添加更多内部版本项目 -->
                </tbody>
            </table>
        </div>
        <div class="tab-content" id="external">
            <h2>外部版本</h2>
            <input type="text" id="searchExternal" placeholder="搜索外部版本...">
            <table>
                <thead>
                    <tr>
                        <th>项目名称</th>
                        <th>下载</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>项目 1</td>
                        <td><a href="外部版本下载链接">下载</a></td>
                    </tr>
                    <tr>
                        <td>项目 2</td>
                        <td><a href="外部版本下载链接">下载</a></td>
                    </tr>
                    <!-- 添加更多外部版本项目 -->
                </tbody>
            </table>
        </div>
    </div>
    
    <script>
        // JavaScript 代码以实现选项卡切换
        function openTab(tabName) {
            const tabContents = document.querySelectorAll(".tab-content");
            const tabButtons = document.querySelectorAll(".tab-button");

            tabContents.forEach(tabContent => {
                tabContent.style.display = "none";
            });

            tabButtons.forEach(tabButton => {
                tabButton.classList.remove("active");
            });

            document.getElementById(tabName).style.display = "block";
            document.querySelector(`.tab-button[data-tab="${tabName}"]`).classList.add("active");
        }

        // 默认显示内部版本
        openTab("internal");

        // 搜索功能
        const searchInternal = document.getElementById("searchInternal");
        const searchExternal = document.getElementById("searchExternal");

        searchInternal.addEventListener("input", function () {
            searchTable("internal", searchInternal.value);
        });

        searchExternal.addEventListener("input", function () {
            searchTable("external", searchExternal.value);
        });

        function searchTable(tabName, searchTerm) {
            const table = document.querySelector(`#${tabName} table`);
            const rows = table.getElementsByTagName("tr");

            for (let i = 1; i < rows.length; i++) { // Start from 1 to skip the header row
                const row = rows[i];
                const cols = row.getElementsByTagName("td");
                let found = false;

                for (let j = 0; j < cols.length; j++) {
                    const cell = cols[j];
                    if (cell.textContent.toLowerCase().includes(searchTerm.toLowerCase())) {
                        found = true;
                        break;
                    }
                }

                if (found) {
                    row.style.display = "";
                } else {
                    row.style.display = "none";
                }
            }
        }
    </script>
</body>
</html>
